import React, { Component } from 'react'
import "./Cla.css"
export default class Cla extends Component {
    constructor(props) {
        super(props)

        this.state = {
            index:0,
            list: [{
                name: 'tab1',
            }, {
                name: 'tab2',
            }, {
                name: 'tab3',
            }],

            tab: [{
                name: '内容1',
            }, {
                name: '内容2',
            }, {
                name: '内容3',
            }]
        }
    }
    emit(index) {
        console.log(index);
        this.setState((state, props) => {
            return {
                index,
            }
        })

    }
    render() {
        return (
            <div>
                <ul>
                    {this.state.list.map((item, index) => {
                        return <li key={index} onClick={() => {
                            this.emit(index)
                        }} className={this.state.index == index ? "ac" : ""}>{item.name}</li>
                    })}
                </ul>
                {this.state.tab.map((item, index) => {
                    return <div key={index} className={["box", this.state.index == index ? "box1" : ""].join(" ")}>{item.name}</div>
                })}

            </div>
        )
    }
}
